<script setup>
import SwiperSlideDefaultTemplate from '@/components/SwiperSlideDefaultTemplate/index.vue'
</script>

<template>
  <SwiperSlideDefaultTemplate background-color="var(--jc-desc-page-color)">
    <div class="swiper-slide-on-dit">
      <div class="content-wrap">
        <div class="card-left img-shap-wrap">
          <div class="img-shap">
            <img class="left-cover card-img-cover" src="https://wondersco.com/wp-content/uploads/2022/05/shape-main-img-01.png" alt="" srcset="">
          </div>
        </div>
        <div class="card-right">
          <h1 class="title">团队说:</h1>
          <p class="desc">团队说几乎有广泛实用性，我们这样来定义团队说的广泛：多人，多部门，分工合作达到计划 、任务、项目、 活动的推进与实施。比如：公司年会的筹备；团队协作完成销售额；项目组推进项目；客服部门要降低客户流失率；游戏项目上线后的运营工作；推广计划实施工作；甚至在学校组织一次联谊......我们最终的目标是在个人、团队、企业心中加持“对他人、对时间以及对执行力的尊重”。</p>
<!--          <a-button type="primary" class="utils-btn">给我来信</a-button>-->
        </div>
        <div class="card-right"></div>
      </div>
      <div class="content-wrap">
        <div class="card-right">
          <h1 class="title">欢:</h1>
          <p class="desc">优秀的团队必然是定期复盘、热爱学习、追求进步及不断升级的团队，能实现持续进化的团队才有可能是持续优秀的团队。否则再优秀的团队，打法过时，观念落后，一如那种拿着冷兵器去对抗拥有热武器敌人的战斗，必然处处碰壁，甚至是一边倒的惨败。业务水平的持续优秀，甚至领先才是核心竞争力，才是真优秀。</p>
        </div>
        <div class="card-left img-shap-wrap">
          <div class="img-shap">
            <img class="left-cover card-img-cover" src="https://wondersco.com/wp-content/uploads/2022/05/shape-main-img-02.png" alt="" srcset="">
          </div>
        </div>
      </div>
    </div>
  </SwiperSlideDefaultTemplate>
</template>


<style lang="scss" scoped>
::v-deep .jc-swiper-slide-template {
  background-color: var(--jc-desc-page-color) !important;
}
.swiper-slide-on-dit {
  width: 100%;
  height: 100%;
  padding-top: calc(var(--jc-header-height) + 40px);
  .content-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 50%;
    overflow: hidden;
    .card-left {
      width: 50%;
      height: 100%;
    }
    .img-shap-wrap {
      //overflow: hidden;
      min-height: 50%;
      .img-shap {
        position: relative;
        overflow: hidden;
        text-align: center;
        border-radius: 32px 12px 32px 12px;
        clip-path: path("M7.20092 375.299L51.8888 123.078C58.2276 87.3015 62.2486 52.6275 93.2145 33.497C114.513 20.3391 146.703 15.4717 171.707 13.9028C279.997 7.10811 377.373 4.61804 515.929 1.0749L526.874 0.794942C560.344 -0.0615993 595.078 0.234001 626.035 12.956C675.004 33.0809 681.038 96.2185 683.376 148.994C687.915 251.411 691.748 331.658 691.217 406.371C690.369 423.924 687.672 436.993 681.54 447.476C661.622 481.524 613.782 483.345 574.629 488.718C394.89 513.384 275.163 529.171 176.374 537.112C128.43 540.967 76.1961 543.319 36.7577 515.855C20.8598 504.784 10.3768 490.218 4.54529 469.666C-4.11278 439.153 1.62887 406.747 7.16279 375.514L7.20092 375.299Z");
        width: 100%;
        height: 100%;
        //background-color: #ffffff;
        //background-color: rgba(62, 133, 213, 0.57);
        .card-img-cover {

        }
      }
    }
    .card-right {
      width: 50%;
      max-height: 100%;
      overflow: hidden;
      .title {
        font-size: 36px;
        line-height: 36px;
        letter-spacing: 1px;
        margin-bottom: 48px;
      }
      .desc {
        font-size: 16px;
        line-height: 34px;
        letter-spacing: 1;
        margin-bottom: 34px;
      }
      .utils-btn {

      }
    }
  }
}
</style>
